<template>
	<div class="main">
		<navTop></navTop>
		<!-- <div class="breadBox">
			<div style="margin:0 auto;" :style="screenWidth>1440?'width:1440px;;':'width:1200px;min-width:1200px;'">
				<el-breadcrumb separator="/">
				<el-breadcrumb-item>学校信息</el-breadcrumb-item>
				<el-breadcrumb-item>教师信息</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
		</div> -->
		<div class="contentboxset">
			<div class="breadBox" :style="screenWidth > 1400 ? 'width:1400px;;' : 'width:1200px;min-width:1200px;'">
				<el-breadcrumb separator="/">
					<el-breadcrumb-item>作业</el-breadcrumb-item>
					<el-breadcrumb-item>学校信息</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
		</div>
		<div class="contentMain">
			<div class="contentmaincontent"
				:style="screenWidth > 1400 ? 'width:1400px;' : 'width:1200px;min-width:1200px;'">
				<div class="searchlist">
					<router-link to="/studentinfo" active-class="hover">学生信息</router-link>
					<router-link to="/teacherinfo" active-class="hover">教师信息</router-link>
					<router-link to="/grademanagement" active-class="hover">年级管理</router-link>
					<router-link to="/classmanagement" active-class="hover">班级管理</router-link>
					<router-link to="/subjectmanagement" active-class="hover">科目管理</router-link>
					<!-- <router-link to="/subjectselectionmanagement" active-class="hover">选科管理</router-link> -->
					<router-link to="/topicmanagement" active-class="hover">题型管理</router-link>
					<!-- <router-link to="/" active-class="hover">上线管理</router-link> -->
					<!-- <router-link to="/taskset" active-class="hover">任务设置 </router-link> -->
				</div>
				<div class="overviewcontent">
					<div class="studentSearch">
						<!-- <el-select v-model="time" placeholder="教师类型" clearable>
							<el-option
							v-for="item in timelist"
							:key="item"
							:label="item"
							:value="item">
							</el-option>
						</el-select> -->
						<el-select v-model="gradeid" placeholder="学部/年级" clearable @change="gradechange">
							<el-option v-for="item in gradelist" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
						<el-select v-model="subjectid" placeholder="学科" clearable @change="subjectchange">
							<el-option v-for="item in subjectlist" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
						<el-input placeholder="教师名称" v-model="teacherobj.query.teacherName" clearable
							@change="teachername"></el-input>
						<el-input placeholder="手机号码" v-model="teacherobj.query.teacherTel" clearable
							@change="teachertel"></el-input>
					</div>
					<div class="tableContent">
						<el-table class="custom-table" ref="multipleSelection" :data="teacherlist" tooltip-effect="dark"
							style="width: 100%" stripe @selection-change="handleSelectionChange"
							:header-cell-style="{ background: '#D8E4F0', color: '#2A303B', fontWeight: '500' }">
							<!-- <el-table-column
							type="selection"
							width="55">
							</el-table-column> -->
							<el-table-column label="ID" width="150">
								<template slot-scope="scope">{{ scope.row.id }}</template>
							</el-table-column>
							<el-table-column prop="name" label="姓名">
							</el-table-column>
							<el-table-column label="角色">
								<template slot-scope="scope">
									<ul>
										<li v-for="item in scope.row.roles">
											{{ item == 1001 ? '校长' : item == 1002 ? '副校长' : item == 1003 ? '教导主任' : item
												== 2001 ? '班主任' : item == 2002 ? '学科组长' : '学科教师' }}
										</li>
									</ul>
								</template>
							</el-table-column>
							<el-table-column label="手机号&账号" width="150">
								<template slot-scope="scope">
									{{ scope.row.phoneNumber }}
								</template>
							</el-table-column>
							<!-- <el-table-column
							label="密码">
							<template slot-scope="scope">{{ scope.row.xb }}</template>
							</el-table-column> -->
							<el-table-column label="授课科目">
								<template slot-scope="scope">
									<span class="blue" v-for="item in scope.row.courses" style="margin:2px;">{{
										item.courName }}</span>
								</template>
							</el-table-column>
							<el-table-column label="授课学段">
								<template slot-scope="scope">
									<span class="blue" v-for="item in scope.row.periods" style="margin:2px;">{{
										item.name }}</span>
								</template>
							</el-table-column>
							<el-table-column label="授课年级">
								<template slot-scope="scope">
									<span class="blue" v-for="item in scope.row.grades" style="margin:2px;">{{ item.name
									}}</span>
								</template>
							</el-table-column>
							<el-table-column label="授课班级">
								<template slot-scope="scope">
									<span class="blue" v-for="item in scope.row.classes" style="margin:2px;">{{
										item.name }}</span>
								</template>
							</el-table-column>
							<el-table-column label="临时教师">
								<template slot-scope="scope">
									<span :class="scope.row.isTemporaryAccount ? 'green' : 'red'">{{
										scope.row.isTemporaryAccount ? '是' : '否' }}</span>
								</template>
							</el-table-column>
							<el-table-column label="管理员">
								<template slot-scope="scope">
									<span :class="scope.row.isAdmin ? 'green' : 'red'">{{ scope.row.isAdmin ? '是' : '否'
									}}</span>
								</template>
							</el-table-column>
							<el-table-column fixed="right" label="操作" align="center" width="100">
								<template slot-scope="scope">
									<div style="display: flex;justify-content: center;">
										<el-button @click="handleClickdetail(scope.row)" type="text" size="small"
											style="display: flex;align-items: center;color:#295CFF"><img
												src="../../assets/image/school/edit.png"
												style="width:12px;margin-right:5px;" />详情</el-button>
										<!-- <el-button @click="handleClick(scope.row)" type="text" size="small" style="display: flex;align-items: center;"><img src="../../assets/image/school/edit.png" style="width:12px;margin-right:5px;" />编辑</el-button>
										<el-button @click="handledelete(scope.row.id)" type="text" size="small" style="display: flex;align-items: center;color:#EC555A"><img src="../../assets/image/school/del.png" style="width:12px;margin-right:5px;" />删除</el-button> -->
									</div>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</div>
		</div>
		<div class="examfooter">
			<div class="examFootercontent"
				:style="screenWidth > 1400 ? 'width:1400px;;' : 'width:1200px;min-width:1200px;'">
				<div class="totaldata">
					<!-- 已选<i>{{multipleSelection.length}}</i>项 /  -->
					<span>共<i>{{ total }}</i>项</span>
					<!-- <em @click="addsinglestudent">新增教师</em>
					<em @click="batchImporttab">批量导入</em>
					<em @click="dacdeletmoreplsc">批量删除</em> -->
				</div>
				<div>
					<!-- <el-pagination
						background
					      @current-change="handleCurrentChange"
					      layout="prev, pager, next, jumper"
					      :total="total">
					    </el-pagination> -->
					<el-pagination background :current-page="teacherobj.page" @current-change="handleCurrentChange"
						:page-sizes="[20, 50, 100]" @size-change="handleSizeChange" :page-size="teacherobj.pageSize"
						layout="sizes, prev, pager, next" :total="total">
					</el-pagination>
				</div>
			</div>
		</div>
		<!-- 新增教师 -->
		<div class="addExamMain" v-if="exditstudentIshow">
			<div class="addExamContent">
				<h3>创建/编辑教师</h3>
				<el-form ref="exitStudentForm" :model="exitStudent" :rules="rules">
					<ul>
						<li>
							<span>ID：</span>
							<div class="inputBox">
								<el-form-item prop="id">
									<el-input v-model="exitStudent.id" disabled clear placeholder="请输入内容"></el-input>
								</el-form-item>
							</div>
						</li>
						<li>
							<span>教师姓名：</span>
							<div class="inputBox">
								<el-form-item prop="name">
									<el-input v-model="exitStudent.name" clear placeholder="请输入内容"></el-input>
								</el-form-item>
							</div>
						</li>
						<li>
							<span>手机号：</span>
							<div class="inputBox">
								<el-form-item prop="phoneNumber">
									<el-input v-model="exitStudent.phoneNumber" clear placeholder="请输入内容"></el-input>
								</el-form-item>
							</div>
						</li>
						<li>
							<span>账号：</span>
							<div class="inputBox">
								<el-form-item prop="account">
									<el-input v-model="exitStudent.account" clear placeholder="请输入内容"></el-input>
								</el-form-item>
							</div>
						</li>
						<li v-if="edittype == 1">
							<span>密码：</span>
							<div class="inputBox">
								<el-form-item prop="password">
									<el-input v-model="exitStudent.password" placeholder="请输入内容"></el-input>
								</el-form-item>
							</div>
						</li>
						<li>
							<span>角色：</span>
							<div class="inputBox">
								<el-form-item prop="roles">
									<el-select v-model="exitStudent.roles" multiple placeholder="请选择">
										<el-option v-for="item in rolelist" :key="item.id" :label="item.name"
											:value="item.id">
										</el-option>
									</el-select>
								</el-form-item>
							</div>
						</li>
						<li>
							<span>授课科目：</span>
							<div class="inputBox">
								<el-form-item prop="courses">
									<el-select v-model="exitStudent.courses" multiple placeholder="请选择">
										<el-option v-for="item in courselist" :key="item.id" :label="item.name"
											:value="item.id">
										</el-option>
									</el-select>
								</el-form-item>
							</div>
						</li>
						<li>
							<span>授课学段：</span>
							<div class="inputBox">
								<el-form-item>
									<el-select v-model="xdnamecon" placeholder="请选择" @change="skxdboxs">
										<el-option v-for="item in xdlistcontent" :key="item.id" :label="item.name"
											:value="item.id">
										</el-option>
									</el-select>
								</el-form-item>
							</div>
						</li>
						<li>
							<span>授课班级：</span>
							<div class="inputBox">
								<el-form-item prop="classes">
									<el-select v-model="exitStudent.classes" multiple placeholder="请选择">
										<el-option v-for="item in classboxlist" :key="item.id" :label="item.name"
											:value="item.id">
										</el-option>
									</el-select>
								</el-form-item>
							</div>
						</li>
						<li>
							<span>管理员：</span>
							<div class="inputBox">
								<el-form-item prop="isAdmin">
									<el-switch v-model="exitStudent.isAdmin" active-color="#295CFF"
										inactive-color="#DEE1E7">
									</el-switch>
								</el-form-item>
							</div>
						</li>
						<li>
							<span>临时教师：</span>
							<div class="inputBox">
								<el-form-item prop="isTemporaryAccount">
									<el-switch v-model="exitStudent.isTemporaryAccount" active-color="#295CFF"
										inactive-color="#DEE1E7">
									</el-switch>
								</el-form-item>
							</div>
						</li>
					</ul>
					<div class="groupbutton">
						<el-button type="primary" @click="exditstudentsure">保存</el-button>
						<el-button type="primary" @click="exditstudentgoback">返回</el-button>
					</div>
				</el-form>
			</div>
		</div>
		<!-- 批量导入 -->
		<div class="addExamMain" v-if="batcImportIshow">
			<div class="addExamContent">
				<h3>批量上传临时学生</h3>
				<div class="uploadbox">
					<el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/">
						<i class="el-icon-upload"></i>
						<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
						<div class="el-upload__tip" slot="tip">每次导入仅能上传一个文件</div>
					</el-upload>
					<a href="#" class="downmoban">下载模板</a>
				</div>
				<div class="groupbutton">
					<el-button type="primary" @click="batcImportsure">确认</el-button>
					<el-button type="primary" @click="batcImportgoback">取消</el-button>
				</div>
			</div>
		</div>
		<!-- 教师信息详情 -->
		<div class="addExamMain" v-if="teacherlistdetailIshow">
			<div class="addExamContent">
				<h3>教师任职信息-{{ teacherdetailName }} <i class="el-icon-close" @click="teacherlistdetailIshow = false"></i>
				</h3>
				<el-table class="custom-table" ref="multipleSelection" :data="teacherlistdetail" tooltip-effect="dark"
					style="width: 100%" stripe
					:header-cell-style="{ background: '#D8E4F0', color: '#2A303B', fontWeight: '500' }">
					<el-table-column label="学段">
						<template slot-scope="scope">{{ scope.row.periodName }}</template>
					</el-table-column>
					<el-table-column label="年级">
						<template slot-scope="scope">{{ scope.row.gradeName }}</template>
					</el-table-column>
					<el-table-column label="班级">
						<template slot-scope="scope">{{ scope.row.classeName }}</template>
					</el-table-column>
					<el-table-column label="科目">
						<template slot-scope="scope">{{ scope.row.courseName }}</template>
					</el-table-column>
					<el-table-column label="职务">
						<template slot-scope="scope">{{
							scope.row.identity == 1001 ? '校长' : scope.row.identity == 1002 ? '副校长' : scope.row.identity
								== 1003 ? '教导主任' : scope.row.identity == 2001 ? '班主任' : scope.row.identity == 2002 ? '学科组长'
									: '学科教师'
						}}</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
	</div>
</template>

<script>
import navTop from "../../components/homework/headtop.vue"
import { get, post, del, put } from '../../request/api.js'
import { mapGetters } from 'vuex';
export default {
	computed: {
		...mapGetters(['getScreenWidth']),
		screenWidth() {
			return this.getScreenWidth;
		},
	},
	data() {
		return {
			addExamIshow: false,
			teacherlist: [],
			gradelist: [],
			currentPage3: 4,
			choosestudentIshow: false,
			exitStudent: {
				id: 0,
				name: '',
				phoneNumber: '',
				account: '',
				password: '',
				isAdmin: false,
				isTemporaryAccount: false,
				roles: [],
				classes: [],
				courses: []
			},
			exditstudentIshow: false,
			batcImportIshow: false,
			subjectid: '',
			gradeid: '',
			teacherobj: {
				page: 1,
				pageSize: 20,
				query: {
					gradeId: 0,
					subjectId: 0,
					teacherName: "",
					teacherTel: ""
				}
			},
			subjectlist: [],
			total: 0,
			multipleSelection: [],
			rolelist: [],
			courselist: [],
			xdlistcontent: [],
			xdnamecon: '',
			currentindex: '',
			classboxlist: [],
			rules: {
				name: [
					{ required: true, message: '请输入教师姓名', trigger: 'blur' },
					{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
				],
				phoneNumber: [
					{ required: true, message: '请输入手机号', trigger: 'blur' },
					{ pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号', trigger: 'blur' }
				],
				account: [
					{ required: true, message: '请输入账号', trigger: 'blur' }
				],
				password: [
					{ required: true, message: '请输入密码', trigger: 'blur' },
					{ min: 6, message: '密码长度至少为 6 位', trigger: 'blur' }
				],
				roles: [
					{ required: true, message: '请选择角色', trigger: 'change' }
				],
				courses: [
					{ required: true, message: '请选择授课科目', trigger: 'change' }
				],
				classes: [
					{ required: true, message: '请选择授课班级', trigger: 'change' }
				]
			},
			edittype: null,
			teacherdetailName: '',
			teacherlistdetailIshow: false,
			teacherlistdetail: []
		}
	},
	mounted() {
		this.teacherlisttab()
		this.gradelisttab()
		this.classifylisttab()
		this.getgradeClass()
	},
	methods: {
		//获取年级列表
		gradelisttab() {
			get('/grade/list')
				.then(res => {
					if (res.code == 200) {
						this.gradelist = res.data
					} else {
						this.$message.error(res.message);
					}
				})
				.catch(error => {
					this.$message.error(error.message);
				})
		},
		// 获取科目列表
		classifylisttab() {
			get('/course/alllist')
				.then(res => {
					if (res.code == 200) {
						this.subjectlist = res.data
					} else {
						this.$message.error(res.message);
					}
				})
				.catch(error => {
					this.$message.error(error.message);
				})
		},
		// 获取教师列表
		teacherlisttab() {
			this.teacherobj.query.gradeId = Number(this.gradeid)
			this.teacherobj.query.subjectId = Number(this.subjectid)
			post('/teacher/list', this.teacherobj)
				.then(res => {
					if (res.code == 200) {
						// //console.info(res)
						this.total = res.data.total
						this.teacherlist = res.data.items
					} else {
						this.$message.error(res.message);
					}
				})
				.catch(error => {
					this.$message.error(error.message);
				})
		},
		//获取角色列表
		getrole() {
			get('/system/role')
				.then(res => {
					// //console.info(res)
					if (res.code == 200) {
						this.rolelist = res.data
					} else {
						this.$message.error(res.message);
					}
				})
		},
		//授课科目
		getcourse() {
			get('/course/alllist')
				.then(res => {
					// //console.info(res)
					if (res.code == 200) {
						this.courselist = res.data
					} else {
						this.$message.error(res.message);
					}
				})
		},
		//获取学段学科
		getgradeClass() {
			get('/period/alllist')
				.then(res => {
					if (res.code == 200) {
						this.xdlistcontent = res.data.map(period => {
							// 提取所有班级
							const classlist = period.grades.flatMap(grade => grade.classes);

							// 返回新的数据结构
							return {
								periodId: period.periodId,
								name: period.name,
								code: period.code,
								description: period.description,
								classlist: classlist, // 平级的班级列表
								id: period.id
							};
						});
						// //console.info(this.xdlistcontent)
					} else {
						this.$message.error(res.message);
					}
				})
		},
		skxdboxs(val) {
			this.currentindex = this.xdlistcontent.findIndex(item => item.id == val)
			this.classboxlist = this.xdlistcontent[this.currentindex].classlist
		},
		//新增教师
		addsinglestudent() {
			this.edittype = 1
			this.exditstudentIshow = true
			this.getrole()
			this.getcourse()
		},
		exditstudentsure() {
			this.$refs.exitStudentForm.validate((valid) => {
				if (valid) {
					if (this.edittype == 1) {
						post('/teacher/addorupdate', this.exitStudent)
							.then(res => {
								this.$message.success('添加成功')
								this.exditstudentIshow = false
								this.exitStudent = {
									id: 0,
									name: '',
									phoneNumber: '',
									account: '',
									password: '',
									isAdmin: false,
									isTemporaryAccount: false,
									roles: [],
									classes: [],
									courses: []
								}
								this.xdnamecon = '', // 选中的学段 ID
									this.teacherlisttab()
							})
					} else {
						put('/teacher/update', this.exitStudent)
							.then(res => {
								this.$message.success('编辑成功')
								this.exditstudentIshow = false
								this.exitStudent = {
									id: 0,
									name: '',
									phoneNumber: '',
									account: '',
									password: '',
									isAdmin: false,
									isTemporaryAccount: false,
									roles: [],
									classes: [],
									courses: []
								}
								this.xdnamecon = '', // 选中的学段 ID
									this.teacherlisttab()
							})
					}

					// //console.log('表单校验通过，提交数据:', this.exitStudent);
					// 提交逻辑
				} else {
					//console.log('表单校验失败');
				}
			});
		},
		exditstudentgoback() {
			this.$refs.exitStudentForm.resetFields(); // 重置表单
			this.exitStudent = {
				id: 0,
				name: '',
				phoneNumber: '',
				account: '',
				password: '',
				isAdmin: false,
				isTemporaryAccount: false,
				roles: [],
				classes: [],
				courses: []
			}
			this.xdnamecon = '', // 选中的学段 ID
				this.exditstudentIshow = false
		},
		// 详情
		handleClickdetail(con) {
			this.teacherdetailName = con.name
			this.teacherlistdetailIshow = true
			let obj = {
				id: con.id
			}
			get('/teacher/details', obj).then(res => {
				// //console.info(res)
				if (res.code == 200) {
					this.teacherlistdetail = res.data
				} else {
					this.$message.error(res.message);
				}
			})
		},
		//编辑
		handleClick(con) {
			// //console.info(con)
			this.edittype = 2
			this.getrole()
			this.getcourse()
			this.exditstudentIshow = true
			this.exitStudent = {
				id: con.id,
				name: con.name,
				phoneNumber: con.phoneNumber,
				account: con.account,
				password: con.password,
				isAdmin: con.isAdmin,
				isTemporaryAccount: con.isTemporaryAccount,
				roles: con.roles.map(item => item.id),
				classes: con.classes.map(item => item.id),
				courses: con.courses.map(item => item.courId)
			}
			let numid = con.periods.map(item => item.id)
			this.xdnamecon = numid[0]
			this.skxdboxs(this.xdnamecon[0])
		},

		//删除单个学生
		handledelete(id) {
			let ids = [id]
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				post('/teacher/delete', ids)
					.then(res => {
						if (res.code == 200) {
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							this.teacherlisttab()
						} else {
							this.$message.error(res.message);
						}
					})
					.catch(error => {
						this.$message.error(error.message);
					})

			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},
		//批量删除学生
		dacdeletmoreplsc() {
			// //console.info(this.multipleSelection.length)
			if (this.multipleSelection.length > 0) {
				let ids = this.multipleSelection.map(item => item.id)
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					post('/teacher/delete', ids)
						.then(res => {
							if (res.code == 200) {
								this.$message({
									type: 'success',
									message: '删除成功!'
								});
								this.teacherlisttab()
							} else {
								this.$message.error(res.message);
							}
						})
						.catch(error => {
							this.$message.error(error.message);
						})

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			} else {
				this.$message({
					type: 'warning',
					message: '请先选择要删除的内容'
				});
			}
		},
		gradechange(val) {
			this.teacherobj.page = 1;
			this.teacherobj.query.gradeId = val
			this.teacherlisttab()
		},
		subjectchange(val) {
			this.teacherobj.page = 1;
			// //console.info(val)
			this.teacherobj.query.subjectId = val
			this.teacherlisttab()
		},
		teachername(val) {
			this.teacherobj.page = 1;
			this.teacherobj.query.teacherName = val
			this.teacherlisttab()
		},
		teachertel(val) {
			this.teacherobj.page = 1;
			this.teacherobj.query.teacherTel = val
			this.teacherlisttab()
		},
		handleCurrentChange(val) {
			this.teacherobj.page = val
			this.teacherlisttab()
		},
		handleSizeChange() {
			this.teacherobj.pageSize = val
			this.teacherlisttab()
		},
		batcImportsure() {
			this.batcImportIshow = false
		},
		batcImportgoback() {
			this.batcImportIshow = false
		},
		batchImporttab() {
			this.batcImportIshow = true
		},
		handleSelectionChange(val) {
			this.multipleSelection = val;
		}
	},
	components: { navTop }
}
</script>

<style scoped>
.main {
	min-height: 100vh;
	;
	background: #F4F7FD;
}

/* .main::-webkit-scrollbar {
		 height:8px;
		background-color: #eee;
		border-radius:10px;
	}
	.main::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.main::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	} */
.contentMain {
	width: auto;
	padding: 0 40px;
	margin: 0 auto;
	padding-bottom: 70px;
}

.contentboxset {
	background: #fff;
	height: 32px;
	border-top: solid 2px #F4F7FD
}

.breadBox {
	width: 1440px;
	margin: 0 auto;
	min-width: 1200px;
	line-height: 32px;
}

.el-breadcrumb {
	width: auto;
	margin: 0 auto;
	line-height: 30px;
	font-size: 14px;
}

.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
	color: #B3B8C2
}

.contentmaincontent {
	width: 1440px;
	;
	margin: 0 auto;
}

.searchlist {
	box-sizing: border-box;
	width: auto;
	padding: 0 40px;
	display: flex;
	justify-content: space-between;
	height: 54px;
	background: #FFFFFF;
	border-radius: 10px;
	padding: 0 24px;
	align-items: center;
	margin-top: 14px;
}

.searchlist {
	padding-left: 20px;
	display: flex;
	align-items: center;
	justify-content: left;
}

.searchlist a {
	display: block;
	color: #557292;
	font-size: 14px;
	width: 100px;
	text-align: center;
	position: relative;
	line-height: 52px;
}

.searchlist a:hover,
.searchlist a.hover {
	color: #295CFF;
}

.searchlist a:hover::after,
.searchlist a.hover::after {
	content: '';
	width: 24px;
	height: 4px;
	background: #295CFF;
	border-radius: 2px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
}

.overviewcontent {
	background: #FFFFFF;
	box-shadow: 0px 4px 16px 0px rgba(85, 114, 146, 0.1);
	border-radius: 10px;
	width: auto;
	margin: 15px auto 0;
}

.examInfo {
	display: flex;
	align-items: center;
}

.examInfo b {
	font-weight: normal;
	font-size: 14px;
	color: #333;
	position: relative;
	padding-right: 14px;
	margin-right: 14px;
}

.examInfo b i {
	font-style: normal;
	color: #8E96A4
}

.examInfo b::after {
	content: '';
	width: 1px;
	height: 8px;
	background: #DEE1E7;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

.examInfo b:last-child::after {
	content: '';
	width: 1px;
	height: 8px;
	background: #fff;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

.overvcontentTop {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24px;
}

.overvcontentTop h3 {
	font-size: 18px;
	font-weight: 500;
	padding-bottom: 15px;
}

.overvcontentTop span {
	width: 124px;
	height: 34px;
	background: #295CFF;
	border-radius: 10px;
	font-size: 14px;
	color: #FFFFFF;
	text-align: center;
	line-height: 34px;
	cursor: pointer;
}

.tableContent {
	padding: 0 24px 30px;
	border-radius: 10px;
}

.tableContent table {
	border-radius: 10px;
	border: 1px solid rgba(216, 228, 240, 0.5);
}

.tableContent table tr th {
	font-size: 14px;
	font-weight: normal;
	background: #E8F0FA;
	height: 42px;
}

.tableContent table tr th:first-child {
	border-radius: 8px 0 0 0;
}

.tableContent table tr th:last-child {
	border-radius: 0 8px 0 0;
}

.tableContent table tr td {
	height: 42px;
	text-align: center;
	font-size: 14px;
	border-right: solid 1px rgba(216, 228, 240, 0.34);
}

.tableContent table tr td:last-child {
	border-right: none;
}

.tableContent table tr td i {
	display: block;
	font-style: normal;
	font-size: 12px;
	color: #999;
	text-align: center;
}

.tableContent table tr td em {
	display: block;
}

.tableContent table tr td span {
	position: relative;
	cursor: pointer;
	display: block;
}

.tableContent table tr td span em {
	font-size: 12px;
	font-style: normal;
}

.tableContent table tr td span.green {
	width: 22px;
	height: 22px;
	background: rgba(40, 143, 65, 0.06);
	border-radius: 6px;
	border: 1px solid rgba(40, 143, 65, 0.5);
	font-size: 14px;
	color: #288F41;
	text-align: center;
	line-height: 22px;
}

.tableContent table tr td span.blue {
	color: #295CFF;
	width: 62px;
	height: 22px;
	background: rgba(41, 92, 255, 0.06);
	border-radius: 6px;
	border: 1px solid rgba(41, 92, 255, 0.5);
	font-size: 14px;
	text-align: center;
	line-height: 22px;
}

.tableContent table tr td span.red {
	color: #EC555A;
	width: 22px;
	height: 22px;
	background: rgba(236, 85, 90, 0.06);
	border-radius: 6px;
	border: 1px solid rgba(236, 85, 90, 0.5);
	font-size: 14px;
	text-align: center;
	line-height: 22px;
}

.tableContent table tr:nth-child(3n) {
	background: #FAFAFB
}

.studentSearch {
	display: flex;
	padding: 24px 24px 14px;
	justify-content: left;
}

.studentSearch .el-select {
	width: 124px;
	margin-right: 24px;
}

.studentSearch>>>.el-input__inner {
	width: 124px;
	border-radius: 10px;
	height: 35px;
	font-size: 14px;
}

.studentSearch>>>.el-input__icon {
	line-height: 35px;
}

.el-input {
	width: auto;
	margin-right: 24px;
}

.studentSearch b {
	width: 124px;
	height: 34px;
	background: #295CFF;
	border-radius: 10px;
	font-size: 14px;
	color: #FFFFFF;
	text-align: center;
	line-height: 34px;
	cursor: pointer;
}

.addExamContent>>>.el-form-item {
	margin: 0;
}

.examfooter {
	width: 100%;
	height: 54px;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0px 4px 16px 0px rgba(85, 114, 146, 0.1);
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 100
}

.examFootercontent {
	width: 1440px;
	;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.examFootercontent .totaldata {
	font-size: 14px;
	color: #557292;
	display: flex;
	justify-content: left;
	align-items: center;
}

.examFootercontent .totaldata i {
	display: inline-block;
	color: #295CFF;
	font-style: normal;
	line-height: 54px;
	padding: 0 3px;
}

.examFootercontent .totaldata em {
	font-style: normal;
	width: 96px;
	height: 34px;
	border-radius: 10px;
	line-height: 34px;
	background: #295CFF;
	text-align: center;
	color: #fff;
	margin-left: 14px;
	cursor: pointer;
}

.examFootercontent .totaldata em:last-child {
	background: #EC555A;
}

.examFootercontent .totaldata>>>.el-pager li.active {
	background-color: #295CFF
}

.examFootercontent>>>.el-pagination.is-background .el-pager li:not(.disabled).active {
	background-color: #295CFF !important;
}

.scorered {
	font-size: 14px;
	color: #EC555A;
	padding: 24px 0;
}

.custom-table {
	width: 100%;
	border: 1px solid rgba(216, 228, 240, 0.34);
	border-radius: 10px;
	border-right: none;
	border-bottom: none;
}

/* 自定义表格内部元素的样式 */
.custom-table>>>.el-table__header-wrapper th {
	background-color: #E8F0FA;
	height: 42px;
	padding: 0;
	text-align: center;
	font-weight: normal
}

.custom-table>>>.el-table__row td {
	height: 42px;
	padding: 0;
	text-align: center;
	border-bottom: none;
	border-right: solid 1px rgba(216, 228, 240, 0.34);
	font-size: 14px;
}

.el-table .warning-row {
	background: #ffffff;
}

.el-table .success-row {
	background: #D8E4F0;
}

.examFootercontent>>>.el-pagination__jump {
	margin-left: 5px;
}

.examFootercontent>>>.el-pager {
	margin-top: 2px;
}

.examFootercontent>>>.el-pager li {
	margin: 0 3px;
	min-width: 25px;
	height: 25px;
	line-height: 25px
}

.examFootercontent>>>.el-pagination button {
	height: 25px;
	line-height: 25px;
	margin-top: 2px;
}

.answerlist {
	display: flex;
	align-items: center;
}

.smallsubject {
	width: 48px;
	height: 22px;
	font-size: 14px;
	text-align: center;
	line-height: 22px;
	border-radius: 6px;
	margin: 0 5px;
	background: rgba(162, 53, 113, 0.06);
	border: 1px solid rgba(162, 53, 113, 0.5);
	color: #A23571;
}

.answerlist li {
	width: 48px;
	height: 22px;
	font-size: 14px;
	text-align: center;
	line-height: 22px;
	border-radius: 6px;
	margin: 0 5px;
}

.answerlist li:nth-child(1) {
	background: rgba(101, 157, 113, 0.06);
	border: 1px solid rgba(101, 157, 113, 0.5);
	color: #659D71
}

.answerlist li:nth-child(2) {
	background: rgba(49, 121, 190, 0.06);
	border: 1px solid rgba(49, 121, 190, 0.5);
	color: #3179BE
}

.answerlist li:nth-child(3) {
	background: rgba(84, 62, 164, 0.06);
	border: 1px solid rgba(84, 62, 164, 0.5);
	color: #543EA4
}

.answerlist li:nth-child(4) {
	background: rgba(101, 157, 113, 0.06);
	border: 1px solid rgba(101, 120, 157, 0.5);
	color: #65789D
}

.addExamMain {
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	left: 0;
	top: 0;
	z-index: 100;
}

.addExamContent {
	width: 584px;
	height: auto;
	background: #FFFFFF;
	box-shadow: 0px 4px 16px 0px rgba(85, 114, 146, 0.1);
	border-radius: 10px;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	box-sizing: border-box;
	padding: 30px;
}

.addExamContent h3 {
	font-size: 18px;
	padding-bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.addExamContent h3 i {
	position: relative;
	top: -6px;
	font-weight: bold;
	cursor: pointer;
}

.groupbutton {
	display: flex;
	align-items: center;
	padding-top: 20px;
	justify-content: center;
}

.groupbutton>>>.el-button {
	width: 124px;
	height: 34px;
	background: #295CFF;
	border-radius: 10px;
	font-size: 14px;
	color: #FFFFFF;
	padding: 0;
}

.groupbutton>>>.el-button:last-child {
	background: #F2F6FB;
	border-radius: 10px;
	border: 1px solid #295CFF;
	color: #295CFF;
	margin-left: 24px;
}

.choosestudent {
	display: flex;
	align-items: center;
	padding: 10px 0 24px;
}

.choosestudent span {
	font-size: 14px;
	color: #557292;
}

.choosestudent>>>.el-input__inner {
	width: 436px;
	height: 34px;
	border-radius: 10px;
	border: 1px solid #D8E4F0;
}

.checkbox-group {
	font-size: 14px;
	color: #5B6371;
	margin-bottom: 20px;
}

.el-checkbox {
	margin-bottom: 12px;
}

.addExamContent ul li {
	display: flex;
	align-items: center;
	padding-bottom: 14px;
	font-size: 14px;
}

.addExamContent ul li span {
	font-size: 14px;
	width: 100px;
	color: #557292;
	text-align: right;
}

.addExamContent ul li p {
	position: relative;
}

.addExamContent ul li p em {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: #C0C4CC;
	cursor: pointer;
}

.addExamContent ul li>>>.el-input__inner {
	width: 400px;
	height: 34px;
	border-radius: 10px;
	border: 1px solid #D8E4F0;
}

.inputBox {
	width: 400px;
}

.inputBox1 {
	width: 300px;
}

.addExamContent ul li div.inputBox1>>>.el-input__inner {
	width: 300px;
	height: 34px;
	border-radius: 10px;
	border: 1px solid #D8E4F0;
}

.addExamContent ul li>>>.el-range__icon {
	line-height: 27px;
}

.groupbutton {
	display: flex;
	align-items: center;
	padding-top: 20px;
}

.groupbutton>>>.el-button {
	width: 124px;
	height: 34px;
	background: #295CFF;
	border-radius: 10px;
	font-size: 14px;
	color: #FFFFFF;
	padding: 0;
}

.groupbutton>>>.el-button:last-child {
	background: #F2F6FB;
	border-radius: 10px;
	border: 1px solid #295CFF;
	color: #295CFF;
	margin-left: 24px;
}

.bcontentcolor {
	font-size: 14px;
	color: #295CFF;
	display: inline-block;
	margin-left: 20px;
	cursor: pointer;
}

.infosetcontentfont {
	color: #5B6371
}

.addExamContent ul li.infosetcontentfont span {
	width: auto;
	height: 26px;
	border-radius: 4px;
	border: 1px solid #D8E4F0;
	color: #B3B8C2;
	font-size: 14px;
	text-align: left;
	line-height: 26px;
	padding: 0 16px 0 10px;
	margin-left: 10px;
}

.addExamContent ul li.infosetcontentfont i {
	font-style: normal;
	color: #295CFF;
	padding: 0 4px;
}

.addExamContent>>>.el-upload-dragger {
	width: 522px;
}

.uploadbox {
	width: 522px;
	height: 220px;
	position: relative;
}

.uploadbox a {
	position: absolute;
	right: 0;
	bottom: 10px;
	font-size: 14px;
	color: #295CFF;
}

.breadBox>>>.el-breadcrumb__inner a,
.breadBox>>>.el-breadcrumb__inner.is-link {
	font-weight: normal
}

.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner,
.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
	font-weight: bold
}

.examFootercontent>>>.el-pagination.is-background .el-pager li:not(.disabled).active {
	background-color: #295CFF !important;
}
</style>
<style>
.el-table .cell {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
</style>